import React, { useState } from 'react'
import { editUserInfo } from '../../api/user';
import { Button, Form, Input, Modal, Avatar, Dropdown, Upload, message } from 'antd';
import {
	UserOutlined,
    UploadOutlined
} from '@ant-design/icons';

const HomeHeader = ({user,setUser,deleteUser}) => {
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [avatarUrl,setAvatarUrl] = useState('')

    const logout = () => {
        deleteUser()
    }

    const showModal = () => {
        setIsModalOpen(true);
    }

    const handleOk = () => {
        setIsModalOpen(false);
    }

    const handleCancel = () => {
        setIsModalOpen(false);
    }

    const onFinish = (values) => {
        editUserInfo({...values,userId:user.userId,avatar:avatarUrl===''?user.avatar:avatarUrl})
        .then(res => {
            setUser(res.data)
        })
    }

    const props = {
        name: 'file',
        action: 'http://8.142.171.141:8080/school-news/user/uploadAvatar',
        headers: {
          authorization: 'authorization-text',
        },
        onChange(info) {
          if (info.file.status !== 'uploading') {
            setAvatarUrl(info.file.response.data)
          }
          if (info.file.status === 'done') {
            message.success(`${info.file.name} 文件上传成功！`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 文件上传失败！`);
          }
        },
    }

    const items = [
        {
            key: '1',
            label: (
                <span target="_blank" rel="noopener noreferrer" onClick={showModal} >
                  个人信息
                </span>
            )
        },
        {
            key: '2',
            label: (
                <span target="_blank" rel="noopener noreferrer" onClick={logout}>
                  退出登录
                </span>
            )
        },
    ]

    return (
        <>
            <Dropdown menu={{ items }}>
                {
                    user.avatar?<Avatar size={46} src={`http://8.142.171.141:8080/school-news/user/img?path=${user.avatar}`} style={{marginRight:30}} onClick={(e) => e.preventDefault()} />:<Avatar size={46} icon={<UserOutlined />} style={{marginTop:10,marginRight:30}} onClick={(e) => e.preventDefault()} />
                }
                
            </Dropdown>

            <Modal title="修改个人信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null} >
                <Form 
                    name="basic" 
                    layout="vertical"
                    style={{ maxWidth: 400, margin:30 }} 
                    initialValues={{ remember: true }}
                    onFinish={onFinish} 
                    autoComplete="off" 
                    initalValue={user}
                >
                    {
                        avatarUrl?<Avatar size={46} src={`http://8.142.171.141:8080/school-news/user/img?path=${avatarUrl}`}  />:<Avatar size={46} icon={<UserOutlined />}  />
                    }
                    <Upload {...props}>
                        <Button style={{margin:20}} icon={<UploadOutlined />} >上传头像</Button>
                    </Upload>

                    <Form.Item label="用户名" name="userName"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名！',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label="密码" name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码！',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item label="昵称" name="nickName">
                        <Input />
                    </Form.Item>

                    <Form.Item label="签名" name="userSignature">
                        <Input />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" block='true' onClick={handleOk} >
                            确定修改
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
        
    )
}

export default HomeHeader